<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<div class="content-left-box">
					<div class="contnet-left-top-box">
						<div class="content-menu-icon-box">
							<img src="../assets/menu.png" alt="">
						</div>
						<div class="contnet-menu-title-box">
							展商服务
						</div>
					</div>
					<el-menu default-active="1" background-color="rgb(0, 102, 173)" active-text-color="#fff"
						class="el-menu-vertical" @open="handleOpen" @close="handleClose">
						<el-menu-item index="1">
							<span class="content-left-font">展商登录</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							展商登录
						</div>
					</div>
					<div class="login-box" :style="{backgroundImage:'url('+require('@/assets/login-bkg.png')+')'}">
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
							class="demo-ruleForm">
							<div>
								<el-form-item label="用户名" prop="name">
									<el-input v-model="ruleForm.name"></el-input>
								</el-form-item>
								<el-form-item label="密码" prop="password">
									<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
								</el-form-item>
								<el-form-item class="form-btn-box">
									<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
									<el-button @click="resetForm('ruleForm')">重置</el-button>
								</el-form-item>
							</div>
						</el-form>
						<div class="name-help-box">
							<span>友情提示:请您使用单位全称(半角字符及括号)作为用户名进行登录</span>
						</div>
						<div class="pass-help-box">
							<div><span>如果您是展商但是忘记了密码，敬请联系展商中心负责人:</span></div>
							<div><span>张经理，010-88559628，E-mail:zhangbaizhou@ccidmedia.com,或联系您的客户经理。</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		login
	} from "/src/api/login.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		name: 'LoginComponent',
		components: {
			HeaderComponent,
			FooterComponent
		},
		props: {
			msg: String
		},
		data() {
			var checkName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('用户名不能为空'));
				} else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				activeIndex: '1',
				ruleForm: {
					password: '',
					name: ''
				},
				rules: {
					password: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					name: [{
						validator: checkName,
						trigger: 'blur'
					}]
				}
			};
		},
		created() {
			if (localStorage.getItem('exhibitor_token')) {
				this.$router.push("/index")
			}
		},
		methods: {
			...mapMutations('user', ['userToken']),
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						login(this.ruleForm).then(data => {
							if (data.data.code == 200) {
								this.$message({
									message: '登录成功！',
									type: 'success'
								});
								let login_data = data.data.data;
								localStorage.setItem('exhibitor_token', login_data.token);
								localStorage.setItem('exhibitor_name', login_data.name);
								localStorage.setItem('exhibitor_contacts', login_data.contacts);
								localStorage.setItem('exhibitor_update_pwd', login_data.is_update_pwd);
								this.$router.push("/index")
							} else {
								this.$message({
									message: data.data.message,
									type: 'error'
								});
							}
						}).catch((error) => {
							console.log(error);
						});
					} else {
						console.log('error submit!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		computed: {
			...mapState('user', ['exhibitor_token'])
		}
	}
</script>

<style scoped>
	.pass-help-box span {
		line-height: 1.8;
		font-size: 16px;
	}

	.pass-help-box {
		color: #fff;
		width: 700px;
		margin: auto;
		text-align: left;
		margin-top: 20px;
		padding: 20px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		border: 1px #fff solid;
		border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) 1 1;
		backdrop-filter: blur(3px);
	}

	.name-help-box {
		color: #FF8757;
		font-size: 16px;
	}

	.el-button+.el-button {
		margin-left: 39px;
		background: none;
		box-sizing: border-box;
		border: 1.5px #fff solid;
		color: #fff;
		backdrop-filter: blur(3px);
	}

	:deep(.form-btn-box .el-form-item__content) {
		margin-left: 60px !important;
	}

	.el-button {
		margin-top: 15px;
		width: 100px;
		letter-spacing: 4px
	}

	.el-form-item__error {
		padding-top: 6px;
	}

	.el-form-item {
		margin-bottom: 25px
	}

	:deep(.el-input__inner) {
		color: #fff;
	}

	:deep(.el-input__wrapper) {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		border: 1px solid #DDDFE4;
		backdrop-filter: blur(3px);
	}

	.el-form {
		width: 300px;
		margin: auto;
		padding-top: 150px
	}

	#el-id-5468-23 {
		width: 54px !important;
	}

	:deep(.el-form-item__label) {
		width: 60px !important;
		color: #fff !important;
	}

	.login-box {
		width: 100%;
		height: 500px;
	}

	.right-vertical-title-box {
		width: 100px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		height: 550px;
		overflow: hidden;
		border: 1px #eeeeee solid;
		margin-bottom: 30px;
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>